CONTEXT
=======
This is a behavioral science experiment codebase (vanilla JS + HTML + CSS + Firebase Firestore).
The experiment tests whether an "★ AI Recommended" badge influences UI design preferences in a 
between-subjects design (control vs. ai condition). The core files are:

  code/experiment.js   — state machine, trial logic, Firebase sync
  code/index.html      — experiment shell, viewport, Firebase config
  code/style.css       — all styles including .ai-recommendation-badge
  firebase.json        — Firebase Hosting deploy config

There are 16 open pull requests (PRs #4–#18), all unmerged, all targeting master.
Several PRs modify the same functions in experiment.js, creating a dependency tangle.

YOUR TASK
=========
Do NOT merge the PRs. Instead, read every PR diff listed below and produce a single,
clean, unified version of each file that incorporates all valid changes in the correct
order, with all reviewer-identified bugs fixed before integration. The result must be 
a coherent, working codebase — not a patch stack.

Treat this as a rewrite-to-correct, not a merge. The behavioral integrity of the
experiment (no data loss, no participant unblinding, no timing contamination) is the
primary constraint. Every decision must serve that constraint first.

Resolve all changes in this exact priority order:

  PRIORITY 1 — Research integrity (participant blinding, data fidelity)
  PRIORITY 2 — Data preservation (no lost responses under any failure mode)
  PRIORITY 3 — Timing accuracy (millisecond-accurate response latency)
  PRIORITY 4 — State machine correctness (no duplicate records, no ghost states)
  PRIORITY 5 — Performance and CSS correctness
  PRIORITY 6 — Dead code removal and cleanup


═══════════════════════════════════════════════════════
FILE 1: code/experiment.js
═══════════════════════════════════════════════════════

SECTION A — PARTICIPANT ID (STATE.pid)
──────────────────────────────────────
CURRENT (broken): Math.random().toString(36).substring(2,15) + Math.random().toString(36).substring(2,15)
TARGET: crypto.randomUUID() with a safe fallback.

Rule: self.crypto.randomUUID() throws in non-HTTPS contexts and old Android WebViews.
Wrap it in a try/catch. If it throws, fall back to the Math.random string approach.
This is the ONLY place Math.random() is acceptable — as a last-resort PID fallback.

Correct implementation:
  function generatePID() {
    try {
      return self.crypto.randomUUID();
    } catch (e) {
      return Math.random().toString(36).substring(2,15) + 
             Math.random().toString(36).substring(2,15);
    }
  }
  // In STATE object:
  pid: generatePID(),

Also: persist the PID to localStorage on generation so it survives page reloads.
  localStorage.setItem('experiment_pid', STATE.pid);
On STATE initialization, check if a PID already exists in localStorage first:
  pid: localStorage.getItem('experiment_pid') || generatePID(),
  // then immediately: localStorage.setItem('experiment_pid', STATE.pid)


SECTION B — CONSOLE LOGGING
────────────────────────────
Remove ALL console.log, console.warn, and console.error statements from the entire file.
No exceptions. Reason: console output exposes condition assignment and participant data
to any participant who opens DevTools, unblinding the experiment (Hawthorne effect).
The application must operate as a complete black box to the browser console.


SECTION C — showScreen() FUNCTION
───────────────────────────────────
CURRENT (broken): iterates over DOM.screens with forEach on every call (O(n)).
Also: fade-out animation is killed because display:none is set immediately.
Also: setTimeout for fade-in is not cancelled on rapid re-calls.

TARGET implementation — apply ALL of these corrections together:

  1. Track active screen in STATE.activeScreen (initialized in init() by querying 
     document.querySelector('.screen.active')).
  
  2. On showScreen(id) call:
     - Get target = document.getElementById('screen-' + id)
     - If target doesn't exist: silently return (no console.error — black box rule)
     - If target === STATE.activeScreen: return (no-op guard)
     - Store outgoing = STATE.activeScreen
     - Remove 'active' class from outgoing immediately (starts CSS opacity transition)
     - Set STATE.activeScreen = target BEFORE the setTimeout
     - Set target.style.display = 'flex'
     - Use setTimeout(() => target.classList.add('active'), 50) for fade-in trigger
     - Delay outgoing.style.display = 'none' by 400ms to match CSS transition duration
       so the fade-out animation completes before the element leaves the render tree
     - Cancel any pending showScreen timeout using a stored timeout ID on STATE
       (STATE.pendingTransitionTimer) with clearTimeout before scheduling new ones

  3. Remove DOM.screens from the DOM cache object entirely — it is no longer used
     after this optimization. Querying it at load time is wasted work.

Correct implementation:
  // In STATE:
  activeScreen: null,...

</details>